<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情</title>
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/common.js"></script>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .w{
            width:1200px;
            margin:20px auto;
        }
        a{
            color:inherit;
            text-decoration: none;
        }
        .good{
            text-align: center;
        }
        ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color:inherit;
        }
        img{

        }
        .detail{
            text-align: center;
        }
        .wrapper{
            display:flex;
            width:900px;
            margin:10px auto;
        }
        .wrapper .item {
            width:50%;
            height:570px;
        }

        .bigbox,  .showimg {
            width:100%;
            height:450px;
        }
        .smallimglist{
            display: flex;
        }
        .smallimglist li{
            width:58px;
            height:58px;
            margin:5px;
        }
        .smallimglist li img{
            width:58px;
            height:58px;
        }
    </style>
</head>
<body>
    <div class="detail">
        
        <div class="islogin">
            <a href="./login_account.html">请登录</a>
            <a href="./register.html">免费注册</a>
        </div>
        <h3>商品详情 </h3>

        <div class="w wrapper">
            <div class="left item">
                <div class="imgbox">
                    <div class="bigbox">
                        <img class="showimg" src="" alt="">
                    </div>
                    <ul class="smallimglist">
                        <!-- <img src="" alt="">
                        <img src="" alt="">
                        <img src="" alt="">
                        <img src="" alt="">
                        <img src="" alt=""> -->
                    </ul>
                </div>
            </div>
            <div class="right item">
                <!-- <div class="goodsinfo">
                    <div class="sku-name">
                        飘柔香氛洗发水甜美花漾530ml（花香调滋润柔滑 持久留香 新老包装随机发货）
                    </div>
                    <div class="summary">
                        京东价: <span> ￥ 6999.0</span> 降价通知 
                    </div>
                    <div class="warp-input">
                        <button>-</button>
                        <input type="number" value="1">
                        <button>+</button>
                    </div>
                    <div class="buy">
                        <button class="addtocart">加入购物车</button>
                    </div>
                </div> -->
            </div>
        </div>
    </div>

    <script>
        var islogin =  document.getElementsByClassName('islogin')[0];
        var left =  document.getElementsByClassName('left')[0];
        var right =  document.getElementsByClassName('right')[0];
        var showimg =  document.getElementsByClassName('showimg')[0];
        var smallimglist =  document.getElementsByClassName('smallimglist')[0];
        

        // 获取 cookie
        var user = getCookie("loginAccount");
        console.log(user)

        
        // 判断用户是否登录 通过 cookie\判断
        // 不管是否登录 详情都可以看到  但是购买商品  那就需要登录 
        
        if(user){
            islogin.innerHTML = `欢迎你,${user} <button onclick="exit()">退出</button>`;
        }
        
        // 退出登录
        function exit(){
            setCookie('loginAccount','',-1);
            location.reload();
        }
        // 解析url
        // console.log(location.href)
        // console.log(location.search)
        
        var url = urlParse();  // 解析浏览器的 url 
        console.log(url)
        

        function changeBigImg(url){
            showimg.src = url; 
        }

        // 根据商品 goodsId 请求商品详情 
        window.onload = function(){
            $.ajax({
                type:"get",
                url:"../good/06_searchGoodsById.php",
                data:{
                    gid:url.goodsId
                },
                dataType:"json",
                success:res=>{
                    console.log(res)
                    const {status,detail,result} = res;
                    
                    if(status){
                        // 左边的图片result
                        showimg.src = result.goodsImg;   //大图片修改 路径 
                        
                        var html = "";
                        var len = result.smallPicList.length>6  ? 6 :   result.smallPicList.length ;  // 最多6张小图片 
                        for(var i=0;i<len;i++){
                            html += `<li class="imgli" >
                                 <img onclick="changeBigImg('${result.bigPicList[i]}')" class="simg" src="${result.smallPicList[i]}"/>
                                </li>`
                        }
                        smallimglist.innerHTML = html;
                        // 右边
                        right.innerHTML = `
                        <div class="goodsinfo">
                            <div class="sku-name">
                                ${result.goodsName}
                            </div>
                            <div class="summary">
                                京东价: <span> ￥ ${result.goodsPrice}</span> 降价通知 
                            </div>
                            <div class="warp-input">
                                <button class="descbtn">减1</button>
                                <input type="number" value="1" class="mynum" >
                                <button class="addbtn">加1</button>
                            </div>
                            <div class="buy">
                                <button class="addtocart" >加入购物车</button>
                                <button class="gotomycart" >进入我的购物车</button>
                            </div>
                        </div>
                        `
                        var mynum = document.getElementsByClassName('mynum')[0]; 
                        var descbtn = document.getElementsByClassName('descbtn')[0]; 
                        var addbtn = document.getElementsByClassName('addbtn')[0]; 
                        var gotomycart = document.getElementsByClassName('gotomycart')[0]; 

                        // 进入购物车
                        gotomycart.onclick = function(){
                            var user = getCookie("loginAccount"); 
                            if(user){
                               location.href = "./shopcart.html"
                            }else{
                                
                                alert("你还未登录,请先登录")
                                location.href="./login_account.html?from=gooddetail";
                            }
                        }
                        
                        descbtn.onclick = function(){
                            console.log(mynum.value)
                            if(mynum.value<=1) return false;
                            mynum.value = mynum.value * 1 - 1;
                        }

                        addbtn.onclick = function(){
                            console.log(mynum.value)
                            mynum.value = mynum.value * 1  +1;
                        }

                        mynum.onchange = function(e){
                            console.log(e.target.value)

                        }
                        // 异步数据 函数无法获取
                        // function mynumdesc(){
                        //     if(mynum.value<=1) return false;
                        //     mynum.value = mynum.value - 1;
                        // }
                        // function mynumadd(){
                        //     mynum.value = mynum.value + 1;
                        // }

                        var addtocart = document.getElementsByClassName('addtocart')[0];  // 开始的时候不存在 
                        
                        // 加入购物车 
                        // 谁   (账号)  user  
                        // 买了什么东西   (商品ID  商品信息 )  goodId
                        // 买了多少件商品  (value)  buynum 

                        // 谁买的  cookie  loginAccount 用户 
                        
                        // 加入购物车之前 判断用户是否登录
                        // user 存在就已经登录状态 => 加入购物车
                        // 没有user 没有登录  => 提示登录 
                        addtocart.onclick = function(){
                            console.log('准备加入购物车了...')
                            var user = getCookie("loginAccount"); 
                            if(user){
                                // 插入数据 
                                $.ajax({
                                    type:"get",
                                    url:"../good/07_addToCart.php",
                                    dataType:"json",
                                    data:{  //动态 
                                        user:user,
                                        buynum:mynum.value,
                                        goodId:url.goodsId
                                    },
                                    success:res=>{
                                        console.log(res)
                                        alert(res.detail)
                                    }
                                })
                            }else{
                                // 问题 1
                                // 详情页 - 登录 - 列表 - 详情

                                // 详情 -  登录  - 详情  (期待 从哪里来登录成功就返回到哪里去 )  
                                alert("你还未登录,请先登录再来购买")
                                location.href="./login_account.html?from=gooddetail";
                            }
                        }
                    }
                }
            })
        }
    </script>
</body>
</html>